<template>
  <div class="main-container">
    <MsButtonGroup>
      <MsButton size="medium" type="default">default</MsButton>
      <MsButton size="medium" type="primary">Primary</MsButton>
      <MsButton size="medium" type="success">success</MsButton>
      <MsButton size="medium" type="info">info</MsButton>
      <MsButton size="medium" type="warning">warning</MsButton>
      <MsButton size="medium" type="danger">danger</MsButton>
    </MsButtonGroup>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
@Component({
  components: {},
})
export default class ButtonPage extends Vue {}
</script>

<style lang="less">
.main-container {
  padding: 20px;
  .ms-button-group {
    .ms-button {
      margin: 0 10px;
    }
  }
}
</style>
